<template>
	<div style="padding:0 37px 0 44px">
    <div class="breadcrumb-father">
      <div class="new-breadcrumb">
        
        <router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
          <router-link :to="{path:'/merchant'}" v-if="userType == '10'">
            {{$t('mer.Client')}}
          </router-link>
          <span v-else>{{$t('newcash.Withdrawal1')}}</span>
          <span class="arrow">></span>
          <span>{{ $t('index.fund') }}</span>
      </div>
    </div>

    <div class="card-table">
      <div class="card-table-title">
        <svg aria-hidden="true" class="svg-icon svg-title-icon">
              <use xlink:href="#icon-cash"></use>
            </svg>
        <span>{{ $t('index.fund') }}</span>
      </div>

      <!--搜索输入框-->
      <div class="search">
        <div class="fund-input">
            <ul class="fund-ul">
              <li class="fund-item">
                <svg aria-hidden="true" class="svg-icon">
                  <use xlink:href="#icon-personinfo"></use>
                </svg>
                <div class="content">
                  <span class="title">{{ $t('mer.AccountBalance') }}</span>
                  <span class="num" v-if="showSum">{{ currency }}{{ accountDatas.balance | fMoney }}</span>
                </div>
              </li>
              <li class="fund-item">
                <svg aria-hidden="true" class="svg-icon">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="content">
                  <span class="title">{{ $t('trade.frozenAmount') }}</span>
                  <span class="num" v-if="showSum">{{ currency }}{{ accountDatas.freezeamt | fMoney }}</span>
                </div>
              </li>
              <li class="fund-item">
                <svg aria-hidden="true" class="svg-icon">
                  <use xlink:href="#icon-wallet"></use>
                </svg>
                <div class="content">
                  <span class="title">{{ $t('mer.AvailableBalance') }}</span>
                  <span class="num" v-if="showSum">{{ currency }}{{ accountDatas.endamt | fMoney }}<button class="el-button blue-btn" @click="dialogWithdraw = true">{{ $t('fund.withdraw') }}</button></span>
                </div>
              </li>
            </ul>
        </div>
      </div>

      <div class="table-border">
          <div class="search-result-head">
            <span> {{ $t('newcash.WithdrawalRecord') }} </span>
            <span style="float:right;">
              <a href="javascript:void(0)" @click='export2Excel()' :title="$t('button.SaveResult')"><icon-svg icon-class="daochu"></icon-svg></a> 
              <a href="javascript:void(0)" @click="refresh()" :title="$t('button.Refresh')"><icon-svg icon-class="shuaxin" id="refresh_icon"></icon-svg></a>
            </span> 
          </div>

          <el-table border :data="orderDatas" height=535 v-loading="loading" :element-loading-text="$t('button.loading')" element-loading-background="rgba(255, 255, 255, 1)">
            <el-table-column type="index" fixed :label="$t('index.Number')" width="60"></el-table-column>
            <el-table-column prop="startTime" :label="$t('newcash.requestDate')" width="180">
            </el-table-column>
            <el-table-column prop="bankname" :label="$t('newcash.bankName')" width="135">
            </el-table-column>
            <el-table-column prop="bankCard" :label="$t('newcash.bankAccount')" width="200">
            </el-table-column>
            <el-table-column prop="drawname" :label="$t('newcash.accountName')" width="180">
            </el-table-column>
            <el-table-column prop="withdrawal_amount" :label="$t('newcash.withdrawAmount')" width="180" :formatter='judgeAmount'>
            </el-table-column>
            <el-table-column prop="type" :label="$t('newcash.withdrawType')" width="180" :formatter='judgeType'>
            </el-table-column>
            <!-- <el-table-column prop="poundage" :label="$t('newcash.withdrawFee')" width="180" :formatter='judgePoundage'>
            </el-table-column> -->
            <!-- <el-table-column prop="amount" :label="$t('newcash.remitAmount')" width="180" :formatter='judgeMoney'>
            </el-table-column> -->
            <el-table-column prop="state" :label="$t('newcash.status')" :formatter='judgeStatus'>
            </el-table-column>
          </el-table>
      </div>
    </div>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page.sync="orderFormData.page" :page-sizes="[15,20,30,50]" :page-size="orderFormData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
    </div>

    <!--提现-->
    <el-dialog :title="$t('newcash.Withdrawal')" :visible.sync="dialogWithdraw" :lock-scroll=false :show-close=false custom-class="custom-dialog" :before-close="handleClose" :close-on-click-modal=false :modal-append-to-body="true" :append-to-body="true" class="el-dialog-add el-dialog-withdraw">
      
      <div class="withdraw-div">
        <div class="title">{{ $t('fund.withdrawMethod') }}</div>

        <div class="withdraw-item">
            <div class="left-div">
              <svg aria-hidden="true" class="svg-icon">
                <use xlink:href="#icon-zhipiao"></use>
              </svg>
              <span class="text">{{ $t('fund.cheque') }}</span>
            </div>
            <div class="right-div radio-div">
              <el-radio v-model="radio" label="0">&nbsp;</el-radio>
            </div>
        </div><!-- withdraw-item结束 -->

        <div class="withdraw-item">
            <div class="left-div">
              <svg aria-hidden="true" class="svg-icon">
                <use xlink:href="#icon-bank"></use>
              </svg>
              <span class="text">{{ $t('fund.bankTransfer') }}</span>
            </div>
            <div class="right-div radio-div">
              <el-radio v-model="radio" label="1">&nbsp;</el-radio>
            </div>
        </div><!-- withdraw-item结束 -->

        <!-- <span class="tip-text">{{ $t('fund.transferTip') }}</span> -->

      </div><!-- withdraw-div结束 -->

      <div class="withdraw-div">
        <div class="title">{{ $t('fund.withdrawAmount') }}</div>

        <div class="withdraw-item">
            <div class="left-div">
              <svg aria-hidden="true" class="svg-icon">
                <use xlink:href="#icon-availablebalance"></use>
              </svg>
              <span class="text">{{ $t('mer.AvailableBalance') }}</span>
            </div>
            <div class="right-div">{{ currency }}{{ accountDatas.endamt | fMoney }}</div>
        </div><!-- withdraw-item结束 -->

        <div class="withdraw-item">
            <div class="left-div">
              <svg aria-hidden="true" class="svg-icon">
                <use xlink:href="#icon-bankaccount"></use>
              </svg>
              <span class="text">{{ $t('newcash.bankAccount') }}</span>
            </div>
            <div class="right-div">{{ bankCard }}</div>
        </div><!-- withdraw-item结束 -->

        <div class="withdraw-item">
            <div class="left-div">
              <svg aria-hidden="true" class="svg-icon">
                <use xlink:href="#icon-withdrawamount"></use>
              </svg>
              <span class="text">{{ $t('newcash.withdrawAmount2') }}</span>
            </div>
            <div class="right-div">
              <div class="coin-sign" v-if="coinShow">{{ currency }}</div>
              <!-- <div class="coin-show" v-if="coinShow">{{ this.currency + this.withdrawMoney }}</div> -->
              <input type="text" v-model="withdrawMoney" @input="setComma" ref="money" class="withdraw-input" maxlength="13" :placeholder="$t('fund.enterAmount')" />
              <button class="el-button blue-btn withdraw-btn" @click="withdrawAll">{{ $t('placeH.All') }}</button>
            </div>
            <div class="error-text" v-text="errorTip"></div>
        </div><!-- withdraw-item结束 -->

      </div><!-- withdraw-div结束 -->

      <div class="warning-div">
        <div class="title">{{ $t('fund.warning') }}</div>
        <div class="content">
          {{ $t('fund.warningTitle') }}<br/>{{ $t('fund.warningText') }}
        </div>
      </div>

      <div class="el-dialog__footer">
        <div class="dialog-footer">
          <button @click="handWithdraw" type="button" class="el-button footer-ok el-button--default">
            <span> {{$t('device.OK')}} </span>
          </button>
          <button @click="cancelWithdraw" type="button" class="el-button footer-cancel footer-cancen-btn el-button--default">
            <span> {{$t('device.cancel')}} </span>
          </button>
        </div>
      </div>

  </el-dialog>

  </div>
</template>
<script>
import { orderAll, withdrawAdd } from "api/fund/index";
import XLSX from "xlsx";
import XLSX_SAVE from "file-saver";

export default {
  name:'fund',
  data() {
    return {
      useId: undefined,
      bankName: undefined,
      bankCard: undefined,
      drawName: undefined,
      currency: undefined,
      userType: localStorage.getItem("userType"),
      orderDatas: [],
      accountDatas: {},
      cards: {},
      res: [],
      degIndex:1,
      rorateFlag:true,
      dialogWithdraw: false,
      radio: '0',
      withdrawMoney: undefined,
      errorTip: "",
      showSum:false,
      //第一次进订单查询默认展示的数据所需的参数
      orderFormData: {
        page: 1,
        pageSize: 15,
        userId: this.$route.query.userId ? this.$route.query.userId : localStorage.getItem('access-userId'),
      },
      coinShow: false,
      oldPage: null,
      loading: true,
      companyId: localStorage.getItem("companyId"),
    };
  },
  watch:{
    'orderFormData.page':function(newVal,oldVal){
        this.oldPage = oldVal;
    },
  },
  created() {
    this.getOrderAll(this.orderFormData);

    if (this.companyId == '1') this.currency = 'HK$ ';
    if (this.companyId == '2') this.currency = 'A$ ';
  },
  updated: function () {

    let money = this.withdrawMoney || 0;

    // 如果输入金额大于等于500，则隐藏提示信息
    if(this.clearComma(this.withdrawMoney) >= 500){
      this.errorTip = "";
    }

    // 如果输入金额大于可提现金额，则提现全部金额
    if((this.clearComma(this.withdrawMoney) * 100) > this.accountDatas.endamt){
      this.withdrawAll();
    }

    // 限制小数点最多两位
    if(money.toString().includes('.')){
      let nums = money.toString().split(".");
      if(nums[1].length > 2) {
        this.withdrawMoney = money.substring(0,money.indexOf(".") + 3);
      }
    }
    
    if($(".withdraw-input").val() == "") {
      $(".withdraw-input").attr("style","width:110px");
    }else {
      let w = 40; // 初始化宽度
      // 根据文本框内容字符数增加相应宽度
      w = w + (money.toString().length * 10);
      let comma = 0;
      // 获取逗号个数
      comma += (money.toString().split(',')).length - 1;
      // 获取点号个数
      comma += (money.toString().split('.')).length - 1;
      // 减去逗号点号多占出的间距
      w = w - (comma * 5);
      $(".withdraw-input").attr("style","width:" + w + "px");
    }

    // 输入值则显示货币符号
    if(this.withdrawMoney) {
      this.coinShow = true;
    }else {
      this.coinShow = false;
    }
  },
  methods: {

    // 清除字符串中所有逗号
    clearComma(str) {
      if(str != undefined){
        let newstr = str.toString().replace(/,/g, "");
        return newstr;
      }
    },

    // 格式化提现金额
    setComma() {
      let money = this.$refs.money.value;

      // 判断点号个数
      let commas = (money.toString().split('.')).length - 1;
      if(commas > 1) {
        // 只能一个
        let index = money.lastIndexOf(".");
        money = money.substring(0,index);
      }
      money = money.replace(/[^\d\.]/g,'');
      let source = money.replace(/,/g,'').split('.');
      source[0] = source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');
      money = source.join('.');
      this.withdrawMoney = money;
    },

    // 提现所有
    withdrawAll() {
      let num = this.withdrawMoney;
      num = this.accountDatas.endamt / 100;
      num = num.toString();
      let source = num.replace(/,/g,'').split('.');
      source[0] = source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');
      this.withdrawMoney = source.join('.');

      if(parseFloat(this.withdrawMoney) >= 500){
        this.errorTip = "";
      }
    },

    // 提现弹窗关闭
    handleClose(done) {
      done();
      this.dialogWithdraw = false;
      this.withdrawMoney = undefined;
      this.radio = '0';
    },

    // 确定提现
    handWithdraw() {

      let withdrawData = {
        "userId": this.userId,    //用户ID
        "type": this.radio,       //支票/网银
        "bankname": this.bankName,//银行名称
        "drawname": this.drawName,//账户名
        "withdrawal_amount": this.clearComma(this.withdrawMoney) || 0,//单位元
        "bankCard": this.bankCard //银行账户
      };

      if(withdrawData.withdrawal_amount < 500 || withdrawData.withdrawal_amount === "NaN.undefined") {
        this.errorTip = this.$t('fund.withdrawLimit') + this.currency + "500";
        return;
      }

      let tip_money = withdrawData.withdrawal_amount;
      if(tip_money.indexOf(".") == -1) {
        // 没有点号，则对显示的整数提现金额进行处理
        tip_money = tip_money + ".00";
      }

      this.$confirm( this.$t('fund.confirmWithdraw') + this.currency + tip_money + this.$t('fund.confirmWithdrawSuffix'), this.$t('hint.Alert') , {
        confirmButtonText: this.$t('button.OK'),
        closeOnClickModal:false,
        cancelButtonText: this.$t('button.Cancel'),
      }).then(() => {
        // 请求提现
        withdrawAdd(withdrawData).then(res => {
          if(res.code === 0){
            this.$notify({
              title: this.$t('inputBox.success'),
              message: this.$t('fund.success'),
              type: 'success',
              duration: 2000
            });
            this.getOrderAll(this.orderFormData);
            this.dialogWithdraw = false;
            this.withdrawMoney = undefined;
          }else{
            this.$notify({
              title: this.$t('inputBox.fail'),
              message: this.$t('fund.failed'),
              type: 'error',
              duration: 2000
            });
          }
          
        })
      }).catch(()=>{});
    },

    // 取消提现
    cancelWithdraw() {
      this.dialogWithdraw = false;
      this.withdrawMoney = undefined;
      this.errorTip = "";
      this.radio = '0';
    },

    // 获取数据
    getOrderAll(value,str) {
      
      const _that = this;

      _that.loading = true;

      if( str == 'CurrentChange' ){
        // 获取所有分页项数，循环去除选中样式，对点击前的项数添加选中样式
        let obj = $('.el-pager .number');
        for( let i = 0; i < obj.length; i++){
            if($(obj[i]).html() == this.oldPage) {
              $(obj[i]).addClass('active');
            } else {
              $(obj[i]).removeClass('active');
            }
        }
      }

      orderAll(value).then(res => {

        // 如果是分页触发，循环去除选中样式，对点击后的项数添加选中样式
        if( str == 'CurrentChange' ){
          let obj = $('.el-pager .number');
          for( let i = 0; i < obj.length; i++){
              if($(obj[i]).html() == this.orderFormData.page) {
                $(obj[i]).addClass('active');
              } else {
                $(obj[i]).removeClass('active');
              }
          }
        }

        this.showSum = true;
        this.orderDatas = res.value.cashRecord.rows;
        this.accountDatas = res.value.Account;
        this.res = res.value.cashRecord;
        this.userId = res.value.Account.user_id;
        this.cards = res.value.card;
        this.bankName = this.cards.bankname;
        this.bankCard = this.cards.bankCard;
        this.drawName = this.cards.drawname;

        setTimeout(function() {
          _that.loading = false;
        },500)
      })
    },

    // 格式化打款金额(V2.8丢弃)
    // judgeMoney(row) {
    //   let amount = row.amount;
    //   if(!amount) {
    //     return this.currency + "0.00";
    //   }else {
    //     return this.currency + this.fmoney(amount, 2);
    //   }
    // },

    //格式化金额
    judgeAmount(row) {
      let formatMoney = row.withdrawal_amount;
      return (formatMoney = this.currency + this.fmoney(formatMoney, 2));
    },

    //格式化手续费
    judgePoundage(row){
      let formatMoney = row.poundage;
      return (formatMoney = this.currency + this.fmoney(formatMoney, 2));
    },
    
    //格式化交易类型
    judgeType(row) {
      let formatPayType = row.type;
      return (formatPayType = formatPayType === "0" ? this.$t('fund.cheque') : this.$t('fund.bankTransfer'));
    },

    //结算状态
    judgeStatus(row) {
      let formatStatus = row.state;
      switch(formatStatus){
        case '1':
          return this.$t('fund.approved');
        case '2':
          return this.$t('fund.rejected');
        case '3':
          return this.$t('fund.paid');
        case '0':
          return this.$t('fund.pending');
      }
    },

    // 格式化金额
    fmoney(s, n) {
      if( s === "") return s = "0.00";
      s = s / 100;
      n = n > 0 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s
          .split(".")[0]
          .split("")
          .reverse(),
        r = s.split(".")[1];
      let t = "";
      for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      return (
        t
          .split("")
          .reverse()
          .join("") +
          "." +
           r
      );
    },

    fmoney_other(s, n) {
      if( s === "") return s = "0.00";
      n = n > 0 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s
          .split(".")[0]
          .split("")
          .reverse(),
        r = s.split(".")[1];
      let t = "";
      for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      return (
        t
          .split("")
          .reverse()
          .join("") +
          "." +
           r
      );
    },

    //刷新数据
    refresh(){
      const _that = this;
      if(this.rorateFlag){
        document.getElementById('refresh_icon').style.transform = 'rotate('+ this.degIndex * 360 +'deg)';
        this.rorateFlag = false;
        this.getOrderAll(this.orderFormData);
        setTimeout(function (param) { _that.rorateFlag = true;_that.degIndex++; },1000);
      }
    },

    //pageSize 改变时会触发
    handleSizeChange(val) {
      this.orderFormData.pageSize = val;
      this.getOrderAll(this.orderFormData);
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.orderFormData.page = val;
      this.getOrderAll(this.orderFormData,'CurrentChange');
    },

    //导出表格
    export2Excel() {
      let length = this.res.total;
      require.ensure([], () => {
        let listQuery = {
          page: 1,
          pageSize: length,
          userId: this.$route.query.userId ? this.$route.query.userId : localStorage.getItem('access-userId'),
        };
        this.formatObj(listQuery);
        orderAll(listQuery).then(res => {
          const list = res.value.cashRecord.rows;
          console.log(list);
          const { export_json_to_excel } = require("../../../vendor/Export2Excel");
          for(let i = 0;i<list.length;i++){
            list[i].type = list[i].type === '0' ? this.$t('fund.cheque') : this.$t('fund.bankTransfer');
            list[i].poundage = this.fmoney(list[i].poundage,2);
            list[i].amount = this.fmoney(list[i].amount,2);
            list[i].withdrawal_amount = this.fmoney(list[i].withdrawal_amount,2);

            switch(list[i].state){
              case '1':
                list[i].state = this.$t('fund.approved');
                break;
              case '2':
                list[i].state = this.$t('fund.rejected');
                break;
              case '3':
                list[i].state = this.$t('fund.paid');
                break;
              case '0':
                list[i].state = this.$t('fund.pending');
                break;
            }
          }
          const tHeader = [
            this.$t('newcash.requestDate'),
            this.$t('newcash.bankName'),
            this.$t('newcash.bankAccount'),
            this.$t('newcash.accountName'),
            this.$t('newcash.withdrawAmount') + ' ' + this.currency,
            this.$t('newcash.withdrawType'),
            // this.$t('newcash.withdrawFee') + ' ' + this.currency,
            this.$t('newcash.remitAmount') + ' ' + this.currency,
            this.$t('newcash.status')
          ]; //对应表格输出的title
          const filterVal = [
            "startTime",
            "bankname",
            "bankCard",
            "drawname",
            "withdrawal_amount",
            "type",
            // "poundage",
            "amount",
            "state",
          ]; // 对应表格输出的数据

          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, this.$t('index.fund')); //对应下载文件的名字
        });
      });
    },

    // 格式化数据
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

    // 格式化对象
    formatObj(obj) {
      let arr = Object.keys(obj);
      for (let i = 0; i < arr.length; i++) {
        if (obj[arr[i]] === "") {
          obj[arr[i]] = null;
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
  .search {overflow: auto;}
  .fund-input {
    padding: 42px 42px 40px 42px;
    min-width: 1222px;
    .fund-ul {
      list-style-type: none;
      overflow: hidden;
      margin: 0;
      padding: 0;
      .fund-item {
        float: left;
        width: 33.33%;
        height: 102px;
        overflow: hidden;
        border: 1px solid #dbe0f5;
        padding: 25px 30px;
        .svg-icon {
          margin: 1px 0;
          font-size: 30px;
          color: #5272e9;
          width: 50px;
          height: 50px;
          float: left;
          margin-right: 20px;
        }
        .content {
          float: left;
          // overflow: hidden;
          width: 72%;
          span {
            display: block;
            overflow: auto;
            // overflow: hidden;
            // text-overflow: ellipsis;
            white-space: nowrap;
            button {
              width: auto;
              height: 22px;
              font-size: 12px;
              padding: 0 10px;
              margin-left:10px;
              vertical-align: bottom;
            }
          }
          span + span {
            margin-top: 8px;
          }
          .title {
              color: #999;
              font-size: 14px;
              height: 20px;
              line-height: 20px;
          }
          .num {
             color: #333;
             font-size: 18px;
             font-weight: bold;
          }
        }
      }
      .fund-item + .fund-item {
        border-left: 0;
      }
    }
  }

  .el-dialog-withdraw .el-dialog {
    width: 450px!important;
  }

  .el-dialog-withdraw .withdraw-input {
    float: left;
    height: 24px;
    width: 110px;
    border: none 0;
    text-align: right;
    padding: 0 6px;
    outline: none;

    &::-webkit-input-placeholder{ /*WebKit browsers*/
      color: #d4d4d4;
    }
    &::-moz-input-placeholder{ /*Mozilla Firefox*/
      color: #d4d4d4;
    }
    &::-ms-input-placeholder{ /*Internet Explorer*/ 
      color: #d4d4d4;
    }
  }

  .withdraw-div {
    position: relative;
    font-size: 16px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 12px;
    .title {
      color: #5272e9;
      margin-bottom: 20px;
    }
    .withdraw-item {
      overflow: hidden;
      margin-bottom: 15px;
      height: 25px;
      .left-div, .right-div {
        overflow: hidden;
      }
      .left-div {
        float: left;
        .svg-icon, .text {
          float: left;
        }
        .svg-icon {
          margin: 2px 20px 2px 0;
        }
        .text {
          color: #323232;
        }
      }

      .right-div {
        position: relative;
        float: right;
        .coin-show {
          text-align: right;
          width: 110px;
          height: 24px;
          line-height: 23px;
          padding: 0 6px;
          position: absolute;
          right: 54px;
          top: 0;
          background-color: #fff;
        }
        .coin-sign {
          position: absolute;
          left: 0;
          top: 0;
          // font-size: 14px;
          // font-weight: bold;
          width: 31px;
          height: 24px;
          line-height: 23px;
          background-color: #fff;
          text-align: right;
          // &:after {
          //   content: ' ';
          //   display: block;
          //   width: 15px;
          //   height: 24px;
          //   background: linear-gradient(to left,rgba(255,255,255,.3),rgba(255,255,255,1));
          //   position: absolute;
          //   left: 28px;
          //   top: 0;
          // }
        }
      }

      .radio-div {
        margin-right: -10px;
      }

      .withdraw-btn {
        width: 54px;
        height: 24px;
        line-height: 23px;
        padding: 0 10px;
        float: left;
      }
    }

    .tip-text {
      font-size: 14px;
      color: #999;
      margin-left: 39px;
    }

    .error-text {
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 12px;
      color: #ff0000;
    }
  }

  .withdraw-div + .withdraw-div {
    margin-top: 20px;
  }

  .warning-div {
    text-align: center;
    padding: 0 35px 10px 35px;
    .title {
      color: #5272e9;
      font-size: 18px;
      line-height: 44px;
    }
    .content {
      text-align: left;
      font-size:13px;
      color: #999;
      line-height: 35px;
    }
  }
</style>
